<template>
    <flexbox>
        <flexbox class="margin-r-16" style="flex-shrink: 0">
            <span>产线/产品：</span>
            <HCascader
                placeholder="请选择"
                :options="treeData"
                labelField="catalogName"
                valueField="catalogCode"
                show-search
                childrenField="subNodes"
                ref="cascaderRef"
                @change="handleCascaderChange"
            />
        </flexbox>
        <flexbox class="margin-r-16" style="flex-shrink: 0">
            <span class="margin-r-16">是否对接jira：</span>
            <a-select v-model:value="form.isConnectJira" style="width: 60px" allowClear class="margin-r-8">
                <a-select-option key="1">是</a-select-option>
                <a-select-option key="0">否</a-select-option>
            </a-select>
        </flexbox>

        <flexbox class="margin-r-16" style="flex-shrink: 0">
            <span class="margin-r-16">是否外部系统：</span>
            <a-select v-model:value="form.isOutsideSystem" style="width: 60px" allowClear class="margin-r-8">
                <a-select-option key="1">是</a-select-option>
                <a-select-option key="0">否</a-select-option>
            </a-select>
        </flexbox>

        <flexbox class="margin-r-16">
            <a-input v-model:value="form.systemName" placeholder="请输入系统名称关键字" />
        </flexbox>

        <flexbox justify="flex-end" style="flex: 1">
            <a-button type="primary" @click="handleSearch">搜索</a-button>
            <a-button class="margin-l-8" @click="handleReset">重置</a-button>
        </flexbox>
    </flexbox>
</template>

<script lang="ts">
import { useRoute } from 'vue-router';
import api from '@/api';
import { deepClone } from '@/utils/util';
import { HCascader } from '@/components';
import { defineComponent, reactive, toRefs, ref, unref } from 'vue';
export default defineComponent({
    components: {
        HCascader
    },
    emits: ['change'],
    setup(_, { emit }) {
        const cascaderRef = ref<any>();
        const route = useRoute();
        const state = reactive<any>({
            form: {
                isConnectJira: null,
                isOutsideSystem: null,
                catalogCode: null,
                systemName: ''
            },
            treeData: []
        });

        const handleSearch = () => {
            emit('change', {
                ...state.form
            });
        };
        const handleReset = () => {
            state.form = {
                isConnectJira: null,
                isOutsideSystem: null,
                catalogCode: null,
                systemName: ''
            };
            unref(cascaderRef).handleClear();
            handleSearch();
        };
        const transformDataByFlatProperty = (data, fields = { keyField: 'node', childrenField: 'subNodes' }) => {
            const { keyField, childrenField } = fields;
            data.forEach((item, index) => {
                data[index] = {
                    ...data[index],
                    ...data[index][keyField],
                    catalogName: data[index][keyField].catalogName
                };
                if (item[childrenField] && item[childrenField].length && +item.node.catalogType < 1) {
                    data[index][childrenField] = transformDataByFlatProperty(item[childrenField], fields);
                } else {
                    data[index][childrenField] = null;
                }
            });
            return data;
        };
        const handleCascaderChange = ({ nodeArr }) => {
            state.form.catalogCode = nodeArr[nodeArr.length - 1];
        };

        // tab列表
        const getTreeData = async () => {
            const { success, moule } = await api.systemReportModel.getReportPBITreeData({
                id: route.query.id
            });
            if (success) {
                if (moule) {
                    state.treeData = transformDataByFlatProperty(deepClone(JSON.parse(moule)));
                } else {
                    state.isEmpty = true;
                }
            }
        };
        getTreeData();

        return {
            cascaderRef,
            ...toRefs(state),
            handleSearch,
            handleReset,
            handleCascaderChange
        };
    }
});
</script>

<style scoped lang="less">
::v-deep(.ant-select-selector) {
    height: 31px !important;
}
</style>